<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div class="control">
            <button>选项1</button>
            <button>选项2</button>
            <button>选项3</button>
        </div>
        <div class="content">
            <div class="box">内容1</div>
            <div class="box">内容2</div>
            <div class="box">内容3</div>
        </div>
    </div>

    <script>
        //创建构造函数Table，形参为要获取的按钮和选择内容
        function Table(btn_selector, content_selector) {
            //此处this指向new Table函数的实例对象tab1
            this.btns = document.querySelectorAll(btn_selector);
            this.contents = document.querySelectorAll(content_selector);
            //将实例对象tab1索引初始化值为0
            this.index = 0;
            //实例对象tab1调用原型对象中的普通函数bindEvent
            this.bindEvent();
            //实例对象tab1调用原型对象中的普通函数changeTable
            this.changeTable();
        }

        Table.prototype.bindEvent = function () {
            //实例对象tab1调用了原型对象中的普通函数bindEvent,所以此处的this指向为tab1,将此处tab1的this赋值给self变量
            var self = this;
            //循环遍历,实例对象中的btns这个DOM元素的长度
            for (var i = 0; i < self.btns.length; i++) {
                //将变量i赋值给实例对象中每一个DOM元素btns的索引值
                self.btns[i].index = i;
                //给实例对象tab1中的每一个DOM元素btns绑定点击事件
                self.btns[i].onclick = function () {
                    //将当前触发点击事件的btns索引赋值给实例对象tab1
                    self.index = this.index;
                    //实例对象调用原型对象的普通函数changeTable
                    self.changeTable();
                }
            }
        }

        Table.prototype.changeTable = function () {
            //实例对象tab1调用了原型对象中的普通函数bindEvent,所以此处的this指向为tab1,将此处tab1的this赋值给self变量
            var self = this;
            //循环遍历实例对象中的dom元素contents长度
            for (var i = 0; i < self.contents.length; i++) {
                //将实例对象tab1中的每一个dom元素contents添加样式：display:none，隐藏起来
                self.contents[i].style.display = "none";
            }
            //实例对象中的dom元素[实例对象的索引值]对应元素的display样式改变为block显示
            self.contents[self.index].style.display = "block";
        }
        //创建一个tab1实例对象,new Table函数并添加实参".control button", ".box"
        var tab1 = new Table(".control button", ".box");
    </script>
</body>

</html>